<template>
  <div class="center">
    <img src="../../assets/lbx.png" class="bg-img lbx" alt="lbx" />
    <img src="../../assets/jt.png" class="bg-img jt" alt="jt" />
    <img src="../../assets/map.png" class="bg-img map" alt="map" />

    <EchartsChart :option="option"></EchartsChart>
  </div>
</template>

<script>
export default {
  name: 'Center',
}
</script>

<script setup>
import EchartsChart from "@/components/EchartsChart/index.vue";
import echarts from "@/plugins/echarts";
import china from "./china.json";
import { reactive } from "vue";

// 使用地图，需要注册地图
echarts.registerMap("china", china);

const option = reactive({
  geo: {
    map: 'china',
    // 每项的颜色
    itemStyle: {
      areaColor: "rgba(104, 216, 254, 0.5)",
      borderColor: "rgba(104, 216, 254, 0.8)",
    },
    // 默认文本的颜色
    label: { color: "#fff" },
    // 增强效果的样式
    emphasis: {
      itemStyle: {
        areaColor: "rgba(104, 216, 254)",
      },
      label: { color: "#fff" },
    },
  },
  series: [
  {
      // 用于带有起点和终点信息的线数据的绘制，主要用于地图上的航线，路线的可视化
      type: "lines",
      // 使用地理坐标系
      coordinateSystem: "geo",
      // 多条航线数据
      data: [
        {
          // 指定起始点和目标点坐标
          coords: [
            [116.4551, 40.8539], // 北京
            [112.2363, 31.1572], // 武汉
          ],
        },
        {
          coords: [
            [116.4551, 40.8539], // 北京
            [114.1178, 22.3242], // 深圳
          ],
        },
        {
          coords: [
            [87.8695, 31.6846], //拉萨
            [116.4551, 40.8539], // 北京
          ],
        },
        {
          coords: [
            [116.4551, 40.8539], // 北京
            [84.9023, 42.148], // 新疆
          ],
        },
      ],
      // 航线的样式
      lineStyle: {
        width: 2,
        color: "#fff",
        curveness: 0.1, // 曲度
      },
      // 线特效的配置
      effect: {
        show: true,
        // 特效图形的标记
        symbol:
          "path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z",
        symbolSize: 12, // 标记的尺寸
        trailLength: 0, // 特效尾迹的长度
      },
    },

    {
      type: "effectScatter", // 带有涟漪特效动画的散点（气泡）图
      coordinateSystem: "geo", // 使用地理坐标系
      data: [ // 需要标注的点
        [116.4551, 40.8539, "北京"],
        [112.2363, 31.1572, "武汉"],
        [114.1178, 22.3242, "深圳"],
        [84.9023, 42.148, "新疆"],
        [87.8695, 31.6846, "拉萨"],
      ],
      itemStyle: { 
        color: "#fff", // 圆点的颜色 
      },
      symbolSize: 8, // 指定圆点的大小
      label: {  // 文字
        show: true,
        formatter: `{@[2]}`, // 显示第三维度的数据值, 也就是名称
        color: "#fff",
        position: "right",
        fontSize: 10,
      },
    },
  ],

  // 隐藏坐标轴
  xAxis: { show: false },
  yAxis: { show: false }
})
</script>

<style scoped lang="scss">

@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

.center {
  position: relative;
  height: 100%;
  .bg-img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    opacity: 0.3;
    animation-name: rotate;
    animation-duration: 20s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }
  .map {
    width: 350px;
    height: 350px;
  }

  .jt {
    width: 380px;
    height: 380px;
    animation-direction: reverse;
  }

  .lbx {
    width: 500px;
    height: 500px;
  }
}
</style>
